<template>
  <div class="CommonSearchSelect" :style="{ zIndex: zIndex }">
    <CommonInput :label="label" v-model="inputValue" :placeholder="placeholder" :required="required" @focus="handleFocus" />
    <div class="search-result" v-if="isShow && searchResult.length">
      <div class="list">
        <div class="item icon-wrap">
          <i class="iconfont iconguanbi" style="color: #c4c4c4;" @click="isShow=false"></i>
        </div>
        <div class="item" v-for="item in searchResult" :key="item.id" @click="handleSelect(item)">{{ item.name }}</div>
      </div>
    </div>
    <div class="select-wrap">
      <div class="list" v-if="!isArray">
        <div class="item" v-if="currentName">
          <div>
            {{ currentName }}
          </div>
          <i class="icon iconfont iconguanbi" style="color: #c4c4c4;" @click="handleDel"></i>
        </div>
      </div>
      <div class="list" v-else >
        <div class="item" v-for="(item, index) in currentValue" :key="item">
          <div>
            {{ currentName[index] }}
          </div>
          <i class="icon iconfont iconguanbi" style="color: #c4c4c4;" @click="handleDel(item)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from 'lodash/debounce'
import api from '@/api'
import CommonInput from './CommonInput'
import isEqual from 'lodash.isequal'
import cloneDeep from 'lodash.clonedeep'

export default {
  components: {
    CommonInput,
  },
  props: {
    value: {
      type: [String, Array],
      required: true,
    },
    nameValue: {
      type: String,
      required: true,
    },
    searchType: {
      type: String,
      required: true,
    },
    label: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    required: {
      type: Boolean,
    },
    labelWidth: {
      type: String,
      default: '',
    },
    zIndex: {
      type: Number,
      default: 99,
    },
  },
  data () {
    return {
      currentValue: '',
      currentName: '',
      inputValue: '',
      isShow: false,
      searchResult: [],
      active: '',
      handleSearch: debounce(this.search, 500),
    }
  },
  computed: {
    isArray () {
      return Array.isArray(this.value)
    },
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler () {
        if (this.isArray) {
          if (!isEqual(this.value, this.currentValue)) {
            this.currentValue = cloneDeep(this.value)
          }
        } else {
          this.currentValue = this.value
        }
      },
    },
    currentValue: {
      deep: true,
      handler () {
        if (this.isArray) {
          this.$emit('input', cloneDeep(this.currentValue))
        } else {
          this.$emit('input', this.currentValue)
        }
      },
    },
    inputValue () {
      this.handleSearch()
    },
    nameValue: {
      immediate: true,
      handler () {
        this.inputValue = this.nameValue
      },
    },
  },
  methods: {
    handleFocus () {
      this.isShow = true
    },
    async search () {
      if (!this.inputValue) {
        this.searchResult = []
        return
      }
      let res
      if (this.searchType === 'user') {
        res = await api.searchUser({
          value: this.inputValue,
        })
      }
      this.searchResult = res.result
    },
    handleSelect (item) {
      this.isShow = false
      this.inputValue = ''
      if (this.isArray) {
        if (!this.currentValue.includes(item.id)) {
          this.currentValue.push(item.id)
          if (Array.isArray(this.currentName)) {
            this.currentName.push(item.name)
          } else {
            this.currentName = [item.name]
          }
        }
      } else {
        this.currentValue = item.id
        this.currentName = item.name
      }
    },
    handleDel (id) {
      if (this.isArray) {
        const findIndex = this.currentValue.findIndex(item => item === id)
        this.currentValue.splice(findIndex, 1)
        this.currentName.splice(findIndex, 1)
      } else {
        this.currentValue = ''
        this.currentName = ''
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~css/var.scss";

.CommonSearchSelect {
	position: relative;
	z-index: 99;

	.search-result {
		overflow: scroll;
		position: absolute;
		left: 0;
		top: calc(100% - 5px);
		z-index: 99;
		width: calc(100% - 110px);
		max-height: 208px;
		border-radius: 5px;
		box-shadow: 0 0 10px 0 rgba(128, 128, 128, .35);
		background: #fff;

		.list {
			.icon-wrap {
				display: flex;
				justify-content: flex-end;
			}

			.item {
				padding: 8px;
				font-size: 16px;

				&:not(:first-child) {
					border-bottom: 1px solid #f4f2f3;
				}
			}
		}
	}

	.select-wrap {
		margin-left: 10px;
		margin-top: 10px;

		.list {
			display: flex;
			flex-wrap: wrap;

			.item {
				display: flex;
				box-sizing: border-box;
				margin: 0 10px 0 0;
				padding: 3px 7px;
				border: 1px solid #d9d9d9;
				border-radius: 4px;
				line-height: 20px;
				font-size: $fz-l;
				color: rgba(0, 0, 0, .65);
				background: #fafafa;
				white-space: nowrap;

				.icon {
					margin-left: 10px;
					font-size: $fz-s;
				}
			}
		}
	}
}
</style>
